workspace: Use invisible guide actor to center overlay title on border

Using CSS to center the title actor on the border is a bit ugly, because
it requires the CSS to match the calculations used in chromeHeights().
Also it is not possible to use CSS margins for cases where the position
of the actor is determined at run time, such as for the close button.

Instead use an invisible actor that spans between the horizontal and
vertical center lines of the border as guide when aligning the title
actor.

https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1313

diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index 2425e22bd1aab5fd8b2decfe13ae80dabdcd8636..48d6f73f562926c626af826b6873d1c9d7e0af0f 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -35,7 +35,6 @@ $window_clone_border_size: 6px;
 
 // Window titles
 .window-caption {
-  margin-top: $window_clone_border_size / 2;
   color: $osd_fg_color;
   background-color: $osd_bg_color;
   border:1px solid $osd_outer_borders_color;

diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index 9d8f8db7a2ebe76acb0a9905081e8ab293d8e073..54cbb5e9fc15975ecf2bd4b35342b37a47983243 100644 (file)
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -283,6 +283,19 @@ var WindowClone = GObject.registerClass({
             align_axis: Clutter.AlignAxis.BOTH,
             factor: 0.5,
         }));
+        this._borderCenter = new Clutter.Actor();
+        this._border.bind_property('visible', this._borderCenter, 'visible',
+            GObject.BindingFlags.SYNC_CREATE);
+        this._borderCenterConstraint = new Clutter.BindConstraint({
+            source: this._windowContainer,
+            coordinate: Clutter.BindCoordinate.SIZE,
+        });
+        this._borderCenter.add_constraint(this._borderCenterConstraint);
+        this._borderCenter.add_constraint(new Clutter.AlignConstraint({
+            source: this._windowContainer,
+            align_axis: Clutter.AlignAxis.BOTH,
+            factor: 0.5,
+        }));
         this._border.connect('style-changed',
             this._onBorderStyleChanged.bind(this));
 
@@ -292,13 +305,17 @@ var WindowClone = GObject.registerClass({
             text: this._getCaption(),
             reactive: true,
         });
+        this._title.add_constraint(new Clutter.BindConstraint({
+            source: this._borderCenter,
+            coordinate: Clutter.BindCoordinate.POSITION,
+        }));
         this._title.add_constraint(new Clutter.AlignConstraint({
-            source: this._windowContainer,
+            source: this._borderCenter,
             align_axis: Clutter.AlignAxis.X_AXIS,
             factor: 0.5,
         }));
         this._title.add_constraint(new Clutter.AlignConstraint({
-            source: this._windowContainer,
+            source: this._borderCenter,
             align_axis: Clutter.AlignAxis.Y_AXIS,
             pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
             factor: 1,
@@ -337,6 +354,7 @@ var WindowClone = GObject.registerClass({
         }));
         this._closeButton.connect('clicked', () => this.deleteAll());
 
+        this.add_child(this._borderCenter);
         this.add_child(this._border);
         this.add_child(this._title);
         this.add_child(this._closeButton);
@@ -376,6 +394,7 @@ var WindowClone = GObject.registerClass({
         // Increase the size of the border actor so the border outlines
         // the bounding box
         this._borderConstraint.offset = this._borderSize * 2;
+        this._borderCenterConstraint.offset = this._borderSize;
     }
 
     _windowCanClose() {